<template>
  <view class="container">
    <!-- 账户卡片 -->
    <view class="account-card">
      <view class="balance-section">
        <view class="balance-item">
          <text class="label"> 总余额（元）</text>
          <text class="amount">{{ balance }}</text>
          <button class="action-btn outline-btn" @tap="handleWithdraw">
            我要提现
          </button>
        </view>
        <view class="divider"></view>
        <view class="balance-item">
          <text class="label">积分兑换</text>
          <text class="amount">{{ points }}</text>
          <button class="action-btn outline-btn" @tap="handleExchange">
            我要兑换
          </button>
        </view>
      </view>
    </view>

    <!-- 我的信息卡片 -->
    <view class="info-card">
      <view class="info-header">
        <text class="info-title">我的信息</text>
        <view class="edit-btn" @click="showEditModal">修改</view>
      </view>
      <view class="info-list">
        <view class="info-item">
          <text class="info-label">姓名</text>
          <text class="info-value">{{ userInfo.name }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">手机号</text>
          <text class="info-value">{{ userInfo.phone }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">密码</text>
          <view>
            <button style="padding: 0 10rpx;" size="mini" type="warn" @click="showEditModal2">修改密码</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 层级更高的动态输入模态框表单: 修改个人信息 -->
    <DynamicModal :visible="DynamicModalVisible" :title="DynamicModalTitle" :inputs="dynamicInputs"
      @cancel="DynamicModalCancel" @confirm="DynamicModalConfirm" />
    <!-- 修改密码  -->
    <DynamicModal :visible="DynamicModalVisible2" :title="DynamicModalTitle2" :inputs="dynamicInputs2"
      @cancel="DynamicModalCancel2" @confirm="DynamicModalConfirm2" />

    <!-- 快捷功能区 -->
    <view class="quick-actions">
      <view v-for="(item, index) in quickActions" :key="index" class="action-item" @tap="handleQuickAction(item.type)">
        <view class="icon-wrapper">
          <text class="iconfont" :class="item.icon"></text>
        </view>
        <text class="action-name">{{ item.title }}</text>
        <text class="action-desc">{{ item.desc }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onShow } from "@dcloudio/uni-app";
import { saveusers, changepasswd } from "@/api/user";
import { ref } from "vue";
import DynamicModal from "@/components/DynamicModal/index.vue";

// 动态输入模态框：  
const DynamicModalTitle = ref('编辑我的信息')
const DynamicModalVisible = ref(false);
const dynamicInputs = ref([])
const DynamicModalCancel = () => { DynamicModalVisible.value = false; };
const DynamicModalConfirm = (values) => {
  console.log("提交的值：", values);
  saveusers({
    ...userInfo.value,
    name: values.inputs[0].value,
    phone: values.inputs[1].value
  }).then(res => {
    console.log("保存成功res:", res);
    DynamicModalVisible.value = false;
  }).catch(err => {
    console.log("保存失败err:", err);
    uni.showToast({ title: err?.Msg || "保存失败", icon: "none", })
  })
}

// 动态输入模态框： 修改密码
const DynamicModalTitle2 = ref('修改密码')
const DynamicModalVisible2 = ref(false);
const dynamicInputs2 = ref([
  { label: "原密码", value: "", type: 'password', required: true, placeholder: "请输入原密码" },
  { label: "新密码", value: "", type: 'password', required: true, placeholder: "请输入新密码" },
  { label: "新密码", value: "", type: 'password', required: true, placeholder: "请再次输入新密码" },
])
const DynamicModalCancel2 = () => { DynamicModalVisible2.value = false; };
const DynamicModalConfirm2 = (values) => {
  console.log("提交的值：", values);
  if (values.inputs[1].value != values.inputs[2].value) {
    uni.showToast({ title: "两次输入新密码不一致", icon: "none", });
    return;
  }
  changepasswd({
    pold: values.inputs[0].value,
    pnew: values.inputs[1].value,
    p1: values.inputs[2].value
  }).then(res => {
    console.log("修改密码成功res:", res);
    if (res) {
      DynamicModalVisible2.value = false;
    }
  }).catch(err => {
    console.log("修改密码失败err:", err);
    uni.showToast({ title: err?.Msg || "修改密码失败", icon: "none", })
  })
}
// 用户数据
const balance = ref("0.90");
const points = ref("579000");

// 快捷功能数据
const quickActions = ref([
  {
    title: "社区",
    desc: "沟通交流",
    icon: "icon-community",
    type: "community",
  },
  {
    title: "选品",
    desc: "积分兑换",
    icon: "icon-gift",
    type: "selection",
  },
  {
    title: "收藏",
    desc: "优选企业",
    icon: "icon-favorite",
    type: "favorite",
  },
]);

// 用户信息数据
const userInfo = ref();

//唤起编辑资料弹窗
const showEditModal = () => {
  DynamicModalVisible.value = true
}
//唤起修改密码弹窗
const showEditModal2 = () => {
  DynamicModalVisible2.value = true
}
// 处理提现
const handleWithdraw = () => {
  // TODO: 实现提现逻辑
  uni.showToast({
    title: "提现功能开发中",
    icon: "none",
  });
};

// 处理兑换
const handleExchange = () => {
  // TODO: 实现兑换逻辑
  uni.showToast({
    title: "兑换功能开发中",
    icon: "none",
  });
};

// 处理快捷功能点击
const handleQuickAction = (type) => {
  switch (type) {
    case "community":
      uni.navigateTo({
        url: "/pages/community/community",
      });
      break;
    case "selection":
      uni.navigateTo({
        url: "/pages/selection/selection",
      });
      break;
    case "favorite":
      uni.navigateTo({
        url: "/pages/favorite/favorite",
      });
      break;
  }
};
onShow(() => {
  if (uni.getStorageSync('userInfo')) {
    userInfo.value = JSON.parse(uni.getStorageSync('userInfo'))
    console.log(' userInfo.value:', userInfo.value);
    dynamicInputs.value = [
      { label: "姓名", value: userInfo.value.name || "", required: true, placeholder: "请输入姓名" },
      { label: "手机号码", value: userInfo.value.phone || "", required: true, placeholder: "请输入手机号码" },
    ]
  }
})
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding: 30rpx;
}

/* 账户卡片样式 */
.account-card {
  background: #fe552e;
  border-radius: 32rpx;
  padding: 48rpx 40rpx;
  margin-bottom: 40rpx;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20rpx 40rpx -8rpx rgba(254, 85, 46, 0.3);
  transform: translateZ(0);
  transition: transform 0.3s ease;
}

.account-card:active {
  transform: translateZ(0) scale(0.98);
}

.account-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 300rpx;
  height: 300rpx;
  background: radial-gradient(circle,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  transform: translate(30%, -30%);
}

.account-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200rpx;
  height: 200rpx;
  background: radial-gradient(circle,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  transform: translate(-30%, 30%);
}

.balance-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.balance-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.divider {
  width: 2rpx;
  height: 160rpx;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0));
  margin: 20rpx 50rpx;
}

.label {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 20rpx;
  font-weight: 500;
  letter-spacing: 1rpx;
}

.amount {
  font-size: 72rpx;
  color: #fff;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 36rpx;
  text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  font-family: "DIN Alternate", -apple-system, BlinkMacSystemFont, sans-serif;
}

.outline-btn {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 2rpx solid rgba(255, 255, 255, 0.8);
  color: #fff;
  font-size: 26rpx;
  padding: 10rpx 36rpx;
  border-radius: 100rpx;
  transition: all 0.3s ease;
  font-weight: 500;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  line-height: 1.4;
}

.outline-btn:active {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 我的信息卡片样式 */
.info-card {
  background: #fff;
  border-radius: 32rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

.info-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200rpx;
  background: linear-gradient(to bottom,
      rgba(255, 107, 107, 0.02),
      rgba(255, 107, 107, 0));
  pointer-events: none;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  position: relative;
}

.info-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
  position: relative;
  padding-left: 24rpx;
}

.info-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 28rpx;
  background: linear-gradient(to bottom, #ff7676, #fe552e);
  border-radius: 3rpx;
}

.edit-btn {
  font-size: 28rpx;
  color: #666;
  padding: 12rpx 32rpx;
  background: #f8f9fa;
  border-radius: 100rpx;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.edit-btn:active {
  background: #f2f3f5;
  transform: translateY(2rpx);
}

.info-list {
  display: flex;
  flex-direction: column;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  transition: all 0.3s ease;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item:active {
  background: #fafafa;
}

.info-label {
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 快捷功能区样式 */
.quick-actions {
  background: #fff;
  border-radius: 32rpx;
  padding: 40rpx;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.04);
}

.action-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.icon-wrapper {
  width: 96rpx;
  height: 96rpx;
  background: #fff5f5;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}

.icon-wrapper .iconfont {
  font-size: 48rpx;
  color: #fe552e;
}

.action-name {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.action-desc {
  font-size: 24rpx;
  color: #999;
}
</style>
